<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>响应式网站开发</title>
		<link href="work.css" type="text/css" rel="stylesheet"/>
	</head>
	<body>
		<div class="header">
			<header>
				<h1><a href="#">Typo</a></h1>
			<nav>
				<ol>
					<li><a href="#">Home</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Archives</a></li>
					<li><a href="#">Contact</a></li>
				</ol>
			</nav>
			</header>
			<div class="sect">
				<article>
					<h2><a href="#">Getting you stock photos seen</a></h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed turpis turpis, eu mattis sem. Sed tristique porta cursus.
					 Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec vestibulum, enim nec 
					 condimentum ullamcorper, magna ipsum sagittis sapien, vel egestas lorem mi et neque. Nulla ultrices felis eget arcu vulputate at
					  hendrerit augue euismod. Nulla at velit ac turpis sollicitudin consequat. Etiam leo tortor, faucibus a consectetur et,
					   consequat venenatis velit. Curabitur tempus sem vitae elit gravida a suscipit leo placerat.</p>
				<ul class="sect02">
					<li>17th October 2011</li>
					<li>Posted in<a href="#">Articles</a></li>
					<li><a href="#">Continue Reading</a></li>
				</ul>
				</article>
				
				<article>
					<h2><a href="#">Top 10 tips for new bloggers</a></h2>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed turpis turpis, eu mattis sem. Sed tristique porta
						 cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec vestibulum,
						  enim nec condimentum ullamcorper, magna ipsum sagittis sapien, vel egestas lorem mi et neque. Nulla ultrices felis
						  eget arcu vulputate at hendrerit augue euismod.
					</p>
					<ul class="sect02">
						<li>17th October 2011</li>
						<li>Posted in<a href="#">Articles</a></li>
						<li><a href="#">Continue Reading</a></li>
					</ul>
				</article>
				<article>
					<h2><a href="#">10 fantastic photography tips</a></h2>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed turpis turpis, eu mattis sem. Sed tristique porta cursus. 
						Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec vestibulum, enim nec condimentum
						 ullamcorper, magna ipsum sagittis sapien, vel egestas lorem mi et neque. Nulla ultrices felis eget arcu vulputate at hendrerit augue 
						 euismod.
					</p>
					<ul class="sect02">
						<li>17th October 2011</li>
						<li>Posted in<a href="#">Articles</a></li>
						<li><a href="#">Continue Reading</a></li>
					</ul>
				</article>
				<nav class="sect03">
					<ul>
						<li class="old01"><a href="#">Older posts</a></li>
						<li class="old02"><a href="#">Newer posts</a></li>
					</ul>
				</nav>
			</div>
			
			<aside class="aside01">
				<section class="sect04">
					<h3>About Me</h3>
					<p>
						Typo is a WordPress theme based entirely on a balanced typographic design. A strict grid layout keeps everything tidy,
						 allowing the content to shine.<a href="#" class="more">Find out more</a>
					</p>
					
				</section>
				<section class="sect05">
					<h3>Categories</h3>
					<ul>
						<li><a href="#">Articles</a></li>
						<li><a href="#">Design</a></li>
						<li><a href="#">Graphics</a></li>
						<li><a href="#">Inspiration</a></li>
						<li><a href="#">nRetro</a></li>
					</ul>
				</section>
				<section class="sect06">
					<h3>Social</h3>
					<ul>
						<li><a href="#">Twitter</a></li>
						<li><a href="#">Facebook</a></li>
						<li><a href="#">Flickr</a></li>
						<li><a href="#">Behance</a></li>
						<li><a href="#">Last.FM</a></li>
						<li><a href="#">YouTube</a></li>
					</ul>
				</section>
				
				<section class="sect07">
					<h3>Latest posts</h3>
					<ul>
						<li><a href="#">Getting your stock photos seen</a></li>
						<li><a href="#">Top 10 tips for new bloggers</a></li>
						<li><a href="#">10 fantastic photography tips</a></li>
					</ul>
				</section>
				
				<section class="sect08">
					<h3>Search</h3>
					<form>
						<fielset>
							<input type="text" class="input01" placeholder="I&#39;m"/>
							<input type="submit" class="input02" value="search"/>
						</fielset>
					</form>
				</section>				
			</aside>
		</div>
		
		<div class="sect09">
			<footer>
				<ul class="ul01">
					<li class="li01"><a href="#">Powered by WordPress</a></li>
					<li class="li02"><a href="#">Theme by SpoonGraphics</a></li>
				</ul>
				<p class="p01"><a href="#">Back to top</a></p>
			</footer>
		</div>
	</body>
</html>
